<template>
    <!--index.wxml-->
    <view class="page">

        <view class="head-part">

            <!-- <image src="https://oss.qmxip.com/flash_goods/1085563945834180608.png" class="userBg"></image> -->
            <view class="top">

                <view class="userinfo">

                    <view class="user-border right-box">
                        <view class="user-border user-border-2">
                            <image class="userinfo-avatar" :src="supermarketInfo.logoSrc" mode="cover"></image>
                        </view>
                    </view>
                    <view class="left-box">
                        <view class="userNickName">{{supermarketInfo.name || ''}}</view>
                    </view>

                </view>

                <view class="part-nums">

                    <view class="part-item" @click="goOrder('8')">
                        <view class="item-con">
                            <text class="label">待配货</text>
                            <view class="num col-red b"> {{ staticNums.dpsNum  ||'0'}}</view>
                        </view>

                    </view>
                    <view class="part-item" @click="goOrder('10')">
                        <view class="item-con">
                            <text class="label">配货中</text>
                            <view class="num b"> {{ staticNums.phzNum ||'0'}}</view>
                        </view>

                    </view>
                    <view class="part-item" @click="goOrder('15')">
                        <view class="item-con">
                            <text class="label">配货完成</text>
                            <view class="num b"> {{ staticNums.phwcNum ||'0'}}</view>
                        </view>

                    </view>
                    <view class="part-item" @click="goOrder('25')">
                        <view class="item-con">
                            <text class="label">已完成</text>
                            <view class="num b"> {{ staticNums.ywcNum ||'0'}}</view>
                        </view>

                    </view>
                </view>

            </view>
        </view>

        <view class="center-box">

            <view class="center-part">
                <view class="all">

                    <view class="all-left">
                        <view class="label">
                            订单总金额
                        </view>
                        <view class="nums">
                            <text class="min">￥</text>{{ totalPrice }}
                        </view>
                    </view>
                    <view class="all-right">
                        <text class="iconfont icon-chushen"></text>
                    </view>

                </view>
            </view>

            <view class="part-nums three ">

                <view class="part-item part" v-for="item,idx in textShowArr" :key="idx">
                    <view class="item-con center-part">
                        <text class="label">{{ item.text }}</text>
                        <view class="num"> <text class="min">￥</text>{{ item.num }}</view>
                    </view>
                </view>

                <view class="part-item part" @click="goRecord">
                    <view class="item-con center-part">
                        <view class="num"> 提现记录</view>
                    </view>
                </view>

                <view class="part-item part" @click="testMessage">
                    <view class="item-con center-part">
                        <view class="num"> 消息提醒授权</view>
                    </view>
                </view>

            </view>

            <!-- <view class="part-nums three ">

                <view class="part-item part" @click="goRecord">
                    <view class="item-con center-part">
                        <view class="num"> 提现记录</view>
                    </view>
                </view>

                <view class="part-item part" @click="testMessage">
                    <view class="item-con center-part">
                        <view class="num"> 消息提醒授权</view>
                    </view>
                </view>


            </view> -->

            <!-- <view class="parts-box">

                <view class="center-part " v-for="item,idx in textShowArr" :key="idx">
                    <view class="normal">

                        <view class="all-left">
                            <view class="label">
                                {{item.text}}
                            </view>
                        </view>

                        <view class="all-right">
                            <view class="nums">
                                <text class="min">￥</text>{{item.num}}
                            </view>
                        </view>

                    </view>
                </view>

            </view> -->

        </view>

    </view>
</template>
<script>
import WxPushMessage from '../../utils/message.js'
const app = getApp();
const defaultAvatarUrl =
    "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0";
export default {
    components: {},
    data () {
        return {
            supermarketInfo: {
                logoSrc: defaultAvatarUrl
            }, //超市信息
            staticNums: {},
            totalPrice: '0', //总金额
            textShowArr: [
                // { text: '订单总金额', num: "", link: "", code: 'orderZje' },
                { text: '进行中金额', num: "0", link: "", code: 'orderJxz' },
                { text: '已完成金额', num: "0", link: "", code: 'orderYwc' },
                { text: '待提现金额', num: "0", link: "", code: 'orderDtx' },
                { text: '可提现金额', num: "0", link: "", code: 'orderKtx' },
                { text: '提现中金额', num: "0", link: "", code: 'orderTxz' },
                { text: '已提现金额', num: "0", link: "", code: 'orderYtxje' },
                { text: '平台服务费', num: "0", link: "", code: 'orderPtfwf' },
            ],

        }
    },
    computed: {

        userId () { return this.$store.getters.userId },

    },

    onShow () {

        // this.initStatic()

    },
    mounted () {

        // this.$axios({url:'/back/user/modify/userInfo',data:{canUseProduct:'1;2;3'}})

        this.initShopInfo()

    },

    methods: {
        initShopInfo () {

            this.$axios({ url: 'flash/supermarket/user/page/list', data: { "pageNum": 1, "pageSize": 20, userId: this.userId } })
                .then(res => {

                    // console.log('超市信息',res)

                    let supermarketId = res.data[0]?.supermarketId

                    if (supermarketId) {
                        this.$axios({ url: 'flash/supermarket/get?loading', data: supermarketId })
                            .then(res => {

                                let shopJson = res.data

                                shopJson.logoSrc = this.$getImg(shopJson.logo),

                                    this.supermarketInfo = shopJson


                            })

                        this.initStatic(supermarketId)
                    }
                    else {

                        uni.showModal({
                            title: '温馨提示',
                            content: '您还没有关联超市，请联系管理员',
                            confirmText: "确定",
                            cancelText: "取消",
                            showCancel: false,
                            success: function (res) {
                                if (res.confirm) {



                                }
                                else {


                                }
                            }
                        })

                    }

                })

        },
        initStatic (supermarketId) {


            //订单统计
            this.$axios('flash/supermarket/statistics/order/status?supermarketId=' + supermarketId)
                .then(res => {

                    // console.log('看看', res)
                    this.staticNums = res.data

                })
            //金额统计    

            this.$axios({ url: 'flash/supermarket/statistics/order/money', data: { supermarketIdList: [supermarketId] } })
                .then(res => {
                    // console.log('看看金额数据', res)

                    let json = res.data || {}

                    this.textShowArr.map(item => {

                        this.$set(item, 'num', json[item.code] || 0)

                    })

                    this.totalPrice = json.orderZje

                })


        },
        goOrder (code) {

            this.$goNext('./order?status=' + code)

        },
        testMessage () {
            WxPushMessage.initType(2, (bool) => {

                // console.log('申请消息',bool )

                let that = this

                if (bool == 4) {

                    uni.showToast({ title: '消息功能正常', icon: 'none' })
                }
                else {

                    WxPushMessage.authorizationBtn(2, (authType) => {

                        if (authType != 3) {

                            uni.showModal({
                                title: '授权失败',
                                content: '注意：授权失败将不能接受消息提示，请打开授权',
                                cancelText: '不需要',
                                confirmText: '授权',
                                success: function (res) {
                                    if (res.confirm) {

                                        that.testMessage()

                                    }
                                }
                            });
                        }

                    })
                }

            }, true)
        },
        //去记录
        goRecord () {
            this.$goNext('./record')
        },
        //下拉刷新
        onPullDownRefresh () {

            //强制更新一次
            app.forceRefresh(( bool ) => {

                if(!bool){
                    this.initShopInfo()
                }

                uni.stopPullDownRefresh();//停止刷新

            })
        },

    }
}
</script>
<style lang="scss" scoped>
.page {
    box-sizing: border-box;
    min-height: 100vh;
    background-color: #efefef;
}
.head-part {
    height: 500rpx;
    position: relative;
    border-radius: 0 0 30px 30px;
    background: linear-gradient(#1587fa, #12375d);
    .userinfo {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        .left-box {
            flex: 1;
            color: #f1f1f1;
            margin-left: 20rpx;
            .userNickName {
                font-size: 32rpx;
                margin-bottom: 14rpx;
            }
        }
        .right-box {
        }
    }
}
.head-part .userBg {
    width: 100%;
    height: 100%;
}
.top {
    position: absolute;
    z-index: 10;
    left: 0;
    top: 18%;
    width: 100%;
    padding: 0 34rpx;
}

.user-border {
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 10rpx;
    display: inline-block;
    border-radius: 50%;
    font-size: 0;
}
.user-border-2 {
    border-color: rgba(255, 255, 255, 0.8);
    padding: 10rpx;
}
.userinfo-avatar {
    overflow: hidden;
    width: 120rpx;
    height: 120rpx;
    /* margin: 20rpx; */
    border-radius: 50%;
    font-size: 0;
}

.center-box {
    box-sizing: border-box;
    position: relative;
    top: -80rpx;
    margin: 0 32rpx;
    .center-part {
        background: #fff;
        box-shadow: 0 4px 20rpx #eaeaea;
        padding: 30rpx;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
        color: #333;
        font-size: 28rpx;
    }
    .all {
        display: flex;
        padding: 30rpx 40rpx;
        .all-left {
            flex: 1;
            .label {
                margin-bottom: 20rpx;
                color: #bebfc1;
            }
            .nums {
                font-weight: bold;
                color: #000;
                font-size: 42rpx;
            }
        }
        .all-right {
            width: 50%;
            text-align: center;
            font-size: 90rpx;
            color: #f1f1f1;
        }
    }
    .normal {
        // display: flex;
        // align-items: center;
        .all-left {
            flex: 1;
            line-height: 1.1;
            margin-bottom: 20rpx;
            .label {
                color: #bebfc1;
                font-size: 20rpx;
            }
        }
        .all-right {
            line-height: 1.1;
            .nums {
                color: #000;
                font-size: 28rpx;
                .min {
                    font-size: 20rpx;
                }
            }
        }
    }
    .parts-box {
        .center-part {
            display: inline-block;
            width: 33%;
        }
    }
    .min {
        font-size: 24rpx;
    }
}

// 分块
.part-nums {
    // width: 100%;
    font-size: 0;
    margin: 0 -14rpx 0;
    &.three {
        .part-item {
            width: 33.3%;
        }
    }
    .part-item {
        display: inline-block;
        vertical-align: top;
        width: 25%;
        padding: 0 14rpx;
        &.part {
            .item-con {
                color: #333;
                .label {
                    color: #bebfc1;
                    font-size: 22rpx;
                }
            }
        }
        .item-con {
            height: 160rpx;
            text-align: center;
            font-size: 30rpx;
            // background: #fff;
            border-radius: 14rpx;
            padding-top: 32rpx;
            color: #fff;
            // box-shadow: 0 0 10px #eaeaea;
        }
        .label {
            display: block;
            margin-bottom: 14rpx;
            font-size: 24rpx;
        }
    }
}
</style>